<template>
  <Head>
    <Link rel="stylesheet" href="/css/base.css" />
  </Head>
  <div>
    <nav>
      <button @click="isShow = !isShow">🐱‍💻购物车</button>
    </nav>
    <main>
      <template v-for="item in shopStore.products" :key="item.id">
        <Card :product="item" @AddProToCart="AddProToCart(item)"></Card>
      </template>
    </main>
    <transition name="aside">
      <aside v-if="isShow">
        <header>购物车</header>
        <transition-group name="shoppingCart">
          <template v-for="item in shoppingCartStore.products" :key="item.id">
            <ShoppingCart :product="item"></ShoppingCart>
          </template>
        </transition-group>
        <footer>
          <section>商品总价: {{ shoppingCartStore.totalPrice }}</section>
          <section><button @click="shoppingCartStore.products = []">结算</button></section>
        </footer>
      </aside>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { UseShopStore } from "@/pinia_store/shop";
import { UseShoppingCartStore } from "./pinia_store/shopping_cart";
import { IProduct } from "./server/api/products";

const isShow = ref(true);
const shopStore = UseShopStore();
const shoppingCartStore = UseShoppingCartStore();
// 初始化数据
shopStore.InitProducts();

function AddProToCart(product: IProduct) {
  //shopPro 减少
  shopStore.DecProQuantity(product.id);
  //shoppingCartPro 增加
  shoppingCartStore.AddProduct(product);
  shoppingCartStore.IncProQuantity(product.id);
}
</script>

<style scoped>
main {
  display: flex;
  flex-wrap: wrap;
}
aside {
  overflow-x: hidden;
  height: 100vh;
  padding: 0.5rem;

  background: rgba(240, 233, 233, 0.95);
  box-sizing: border-box;
  border-left: 0.5rem tomato solid;
  position: absolute;
  top: 0;
  right: 0;
}
aside footer {
  position: absolute;
  bottom: 2rem;
}
/* 动画 */
.shoppingCart-enter-from {
  opacity: 0;
  transform: translateY(30px);
}
.shoppingCart-leave-to {
  opacity: 0;
  transform: translateY(30px);

  width: 0;
  padding: 0;
  border: none;
  margin-right: 0;
}
.shoppingCart-enter-active,
.shoppingCart-leave-active {
  transition: all 0.5s;
}
.shoppingCart-move {
  transition: transform 100s;
}

.aside-enter-from {
  opacity: 0;
  transform: scaleX(0);
  transform-origin: right;
}
.aside-leave-to {
  transform: scaleX(0);
  opacity: 0;
  transform-origin: right;
}
.aside-enter-active,
.aside-leave-to {
  transition: all 0.5s;
}
</style>
